<template>
  <a-modal v-model:visible="visible" footer="" :title="modalTitle" @cancel="closeImgModal" :forceRender="false"
    destroy-on-close>
    <a-upload-dragger v-model:fileList="state.fileList" name="image" :multiple="true" accept="image/*"
      :headers="state.headers" :data="state.data" :action="uploadUrl" @change="handleChange" @drop="handleDrop"
      listType="picture">
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">点击或者拖动文件到这个区域上传</p>
      <p class="ant-upload-hint">
        仅支持jpg,png,jpeg,gif格式的图片类型并且大小不能超过2MB
      </p>
      <p class="ant-upload-hint">支持选择多张图片上传，支持拖拽文件夹上传。</p>
    </a-upload-dragger>
  </a-modal>
</template>
<script setup>
import config from "~/config";
import useModal from "@/utils/useModal";
import { InboxOutlined } from "@ant-design/icons-vue";
import { reactive, ref } from "vue";
import { userStore } from "@/stores/modules/user";
import { message } from "ant-design-vue";

const emits = defineEmits(["madal-success"]);
const { visible, modalTitle } = useModal();
const store = userStore();

const MODE = import.meta.env.MODE; // 环境变量
let base = config[MODE];

let uploadUrl = "/home/ossUpload";
//如果测试环境
uploadUrl = base.uploadUrl + "" + uploadUrl;

const state = reactive({
  fileList: [], //上传图片列表
  data: {
    platform: "pc",
    version: "1.0",
    cate_id: 0,
  },
  headers: {
    Authorization: "Bearer " + store.userInfo.access_token || "",
  }, //上传的header
});

const show = (model) => {
  visible.value = true;
  modalTitle.value = "上传图片";
  //分类id
  state.data.cate_id = model.cate_id
};
const closeImgModal = function () { };
//上传图片
const handleChange = (info) => {
  const status = info.file.status;
  if (status !== "uploading") {
  }

  if (status === "done") {
    if (info.file.response.code == 0) {
      message.success(`${info.file.name} 上传成功`);
      emits("madal-success");
    } else {
      message.error(info.file.response.msg);
    }
  } else if (status === "error") {
    message.error(`${info.file.name} file upload failed.`);
  }
};
const handleDrop = function (e) {
  console.log(e, "拖拉");
};

defineExpose({
  show,
});
</script>